<template>
  <div class="container">
    <!-- 导航条 -->
    <van-nav-bar left-arrow @click-left="$router.back()" title="编辑资料">
    </van-nav-bar>

    <!-- 编辑区 -->
    <van-cell-group>
      <input id="file" hidden ref="file" type="file" @change="hFileChange" />
      <van-cell is-link title="头像" @click="hClickPhoto" center>
        <van-image
          slot="default"
          width="1.5rem"
          height="1.5rem"
          fit="cover"
          round
          :src="userInfo.photo"
        />
      </van-cell>
      <!-- value： 设置右侧显示的文字 -->
      <van-cell
        is-link
        title="姓名"
        :value="userInfo.name"
        @click="isShowName = true"
      />
      <van-dialog
        v-model="isShowName"
        title="修改名字"
        show-cancel-button
        @confirm="hSaveName"
      >
        <van-field v-model.trim="newName" />
      </van-dialog>

      <van-cell
        is-link
        title="性别"
        :value="userInfo.gender === 1 ? '女' : '男'"
        @click="isShowGender = true"
      />
      <!-- 修改性别 -->
      <van-popup v-model="isShowGender" position="bottom">
        <van-nav-bar
          title="修改性别"
          left-text="取消"
          @click="isShowGender = false"
        >
        </van-nav-bar>
        <van-cell title="男" @click="hSaveGender(0)" is-link></van-cell>
        <van-cell title="女" @click="hSaveGender(1)" is-link></van-cell>
      </van-popup>

      <van-cell
        is-link
        title="生日"
        :value="userInfo.birthday"
        @click="isShowBirthday = true"
      />
      <!-- 修改生日 -->
      <van-popup v-model="isShowBirthday" position="bottom">
        <van-nav-bar title="修改生日"> </van-nav-bar>
        <van-datetime-picker
          v-model="newDate"
          type="date"
          title="选择年月日"
          @cancel="isShowBirthday = false"
          @confirm="hSaveBirthday"
          :min-date="minDate"
          :max-date="maxDate"
        />
      </van-popup>
    </van-cell-group>
  </div>
</template>

<script>
import { mapState } from 'vuex'
import { formatDate } from '@/api/user.js'
export default {
  name: 'userProfile',
  data () {
    return {
      // 控制弹层
      isShowName: false,
      isShowGender: false,
      isShowBirthday: false,
      // 修改后的新名字
      newName: '',
      // 修改后新生日
      newDate: new Date(),
      minDate: new Date(1965, 0, 10), // dateTime-picker中最小时间
      maxDate: new Date() // 当前时间
    }
  },
  created () {
    // 调用带命名空间的modules中的action
    this.$store.dispatch('user/getInfo')
  },

  computed: {
    // ...mapState(命名空间名, ['state名字'])
    ...mapState('user', ['userInfo'])
  },
  methods: {
    // 修改生日
    async hSaveBirthday () {
      console.log(this.newDate)
      // 组件中提供的时间是标准时间，后端接口中需要是年-月-日的格式，
      // 要进行转换
      const birthday = formatDate(this.newDate)
      try {
        await this.$store.dispatch('user/updateUserBirthday', birthday)
        // 2. 关闭弹层
        this.isShowBirthday = false
      } catch (err) {
        console.log(err)
      }
    },
    // 修改性别

    async hSaveGender (gender) {
      try {
        await this.$store.dispatch('user/updateUserGender', gender)
        console.log('发送性别', gender)
        this.isShowGender = false
      } catch (error) {
        console.log(error)
      }
    },

    hClickPhoto () {
      this.$refs.file.click()
    },
    async hSaveName () {
      if (this.newName === '') {
        return
      }
      // 向后端发送请求
      try {
        await this.$store.dispatch('user/updateUserInfo', this.newName)
        this.$toast.success('修改成功')
        console.log('123', this.$store.state.user.userInfo)
      } catch (err) {
        console.log(err)
        this.$toast.fail('修改失败')
      }
    },
    async hFileChange (e) {
      const file = e.target.files[0]
      if (!file) {
        // 用户没有选中
        return
      }

      // 做文件上传
      console.dir(file)
      // ajax文件上传
      // 1. 封装FormData对象
      // 2. append参数
      const fd = new FormData()
      fd.append('photo', file)
      try {
        await this.$store.dispatch('user/updateUserPhoto', fd)
        this.$toast.success('操作成功')
      } catch (err) {
        this.$toast.fail('操作失败')
      }
    }
  }

}
</script>
